// import React from "react"
import {FaStar} from "react-icons/fa";
import React, {useEffect, useState} from "react";

// 渲染导入
const Star = ({ selected = false, onSelect= f => f}) => (

    <FaStar color={selected ? "Red" : "Grey"} onClick={onSelect}/>
);

// 按照星级数量映射 StarRating
const createArray = length => [...Array(length)];

// 自定义星级数量
export default function StartRating({style ={}, totalStars = 5}){
    const [selectedStars, setSelectStars] = useState(3)
    // console.log(selectedStars);
    // return createArray(totalStars).map((n, i) => <StarRating key={i}/>)
    return (
        <div style={{padding: "5px", ...style}}>
            {createArray(totalStars).map((n, i) => (<Star key={i} selected={selectedStars > i} onSelect={() => setSelectStars(i + 1)}/>))}
            <p>{selectedStars} of {totalStars} stars</p>
        </div>
    );

}



